<template>
	<div class="login-page">
        <div class="center">
            <h1 class="left">
                <img :width="69" :height="79" class="logo" :src="require('@images/logo1.png')" alt="">
                <img :width="310" :height="285" class="bg" :src="require('@images/robot.png')" alt="">
                <div class="brand fs24">慢病管理云平台</div>
            </h1>
            <div class="right">
                <div class="login-form">
                    <h3 class="fs30 lh200">用户登录</h3>
                    <Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
                        <div>
                            <FormItem prop="account">
                                <Input type="text" :maxlength="11" v-model="formInline.account" placeholder="用户名">
                                    <Icon :size="20" @click="formInline.account=''" v-if="formInline.account.length" slot="suffix" type="md-close-circle" />
                                </Input>
                            </FormItem>
                        </div>
                        <div>
                            <FormItem prop="password">
                                <Input :type="eye?'text':'password'" v-model="formInline.password" placeholder="密码">
                                    <Icon :size="25" :type="eye?'ios-eye-off':'ios-eye'" slot="suffix" @click="eye=!eye" />
                                </Input>
                            </FormItem>
                        </div>
                        <div class="fun">
                            <Checkbox v-model="checked" @on-change="change">记住密码</Checkbox>
                            <router-link to="findback">忘记密码</router-link>
                        </div>
                        <FormItem>
                            <Button class="action" :loading="loading" type="primary" @click="handleSubmit('formInline')">登录</Button>
                        </FormItem>
                    </Form>
                </div>
            </div>
        </div>
        
    </div>
</template>
<script>
import { tokenLogin, tokenTokenRefreshToken, } from '../../api/token.js'
import {setCookie,getCookie,removeCookie,} from '../../utils/cookie.js'

export default {
	data() {
		return {
			formInline: {
				account: '',
				password: ''
            },

            eye: false,
            checked:false,
            loading: false,
			ruleInline: {
				account: [{ required: true, message: '请输入正确的用户名', trigger: 'blur' }],
				password: [{ required: true, message: '请输入正确的密码', trigger: 'blur' }, { type: 'string', min: 6, message: 'The password length cannot be less than 6 bits', trigger: 'blur' }]
            },
		}
    },
    created() {
        localStorage.removeItem("userInfo")
        removeCookie("token")
        removeCookie("refreshToken")
    },
    mounted(){
        if (window.location.host.includes('localhost')) {
            this.formInline = {
                account: 'admin',
                password: '123456',
            }
        }
        const account = getCookie('account')
        const password = getCookie('password')
        console.log('account-->', account)
        console.log('password-->', password)

        if (account && password) {
            this.checked = true;
            this.formInline = {
                account,
                password,
            }
        } else{
            this.checked = false;
        }
    },
	methods: {
        change(status){
            if (status) {
                setCookie('account',this.formInline.account)
                setCookie('password',this.formInline.password)
            } else{
                removeCookie('account')
                removeCookie('password')
            }
        },
        removeToken() {
            removeCookie("token")
            removeCookie("refreshToken")
            localStorage.removeItem("userInfo")
        },
		handleSubmit(name) {
			this.$refs[name].validate(valid => {
				if (valid) {
                    const params = {
                        ...this.formInline,
                        ...{
                            identityType: 'account',
                        },
                    }
                    if (this.loading) return;
                    this.loading = true;
                    tokenLogin(params).then(res => {
                        
                        if (res.code === "0") {
                            setCookie("token",res.data.token);
                            setCookie("refreshToken",res.data.refreshToken);
                            localStorage.setItem("userInfo",JSON.stringify(res.data));
                            this.$store.commit("setMenus",res.data.resources);
                            this.$store.commit("setUser", res.data.user); 
                            this.$Message.success('登录成功');
                            this.change(true)
                            setTimeout(() => {
                                this.$router.push('/')
                            }, 300);
                            // this.$Message.success('This is a success tip');
                            // this.$Message.warning('This is a warning tip');
                            // this.$Message.error('This is an error tip');
                        } else {
                            this.$Modal.warning({
                                title: '登录',
                                content: res.code
                            });
                            this.removeToken()
                        }
                        setTimeout(() => {
                            this.loading = false;
                        }, 300);
                    }).catch(err => {
                        console.log("err>", err)
                        this.$Modal.warning({
                            title: '登录',
                            content: err.errMsg
                        });
                        this.loading = false;
                        this.removeToken()
                        console.log("tokenLogin err-->", err)
                    })
				}
			})
		}
	}
}
</script>
<style lang="scss">
.login-page{
    .action{
        width: 100%;
        color: #fff;
    }
    .center{
        width: 860px;
        background: linear-gradient(135deg,#40DEAA,#1FAD7E);
        display: flex;
        justify-content: center;
        box-shadow: 0 0 8px rgba($color: #000000, $alpha: 0.2);
        border-radius: 8px;
        overflow: hidden;
    }
    .left{
        width: 400px;
        position: relative;
        text-align: left;
        .logo{
            margin-top: 20px;
            margin-left: 20px;
        }
        .bg{
            display: block;
            margin-left: auto;
            margin-right: auto;
            margin-top: -10px;
        }
    }
    .brand{
        color: #fff;
        text-align: center;
        margin-bottom: 60px;
    }
    .right{
        flex: 1;
        padding: 80px;
        background-color: #fff;
    }
    .title{
        img{
            margin-right: 10px;
        }
        line-height: 300%;
        color: #fff;
        vertical-align: middle;
    }
    .ivu-form-item{
        width: 100%;
        margin-top: 20px;
    }
    .ivu-input{
        outline: 0 none;
        border-radius: 0;
        width: 100%;
        border: 0 none;
        border-bottom: 1px solid #d7dde4;
    }
    .ivu-input:focus{
        border-bottom-color: var(--active);
        box-shadow: none;
    }
    .ivu-input:hover{
        border-bottom-color: var(--active);
        box-shadow: none;
    }
    .fun{
        display: flex;
        justify-content: space-between;
    }
    h3{
        color: var(--active);
        text-align: center;
    }
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
